<template>
  <div class="pad">
    <!-- search start -->
    <search-bar placeHolder="请输入保险公司名称"
                :isShowAdd="true"
                btnText="添加保险公司"
                @handleSearch="init"
                @handleAdd="handleCompany" />
    <!-- search end -->

    <!-- insurance start-->
    <table-data-el :tableData="tableData.list"
                   :tableLabel="tableLabel"
                   :pageCount="tableData.rows"
                   @handleCompany="handleCompany"
                   :page.sync="page"
                   v-loading="loading"
                   :pageSize.sync="pageSize" />
    <!-- insurance end -->

    <!-- dialog start -->
    <el-dialog :visible.sync="isShowDialog"
               :title="dialogTitle"
               width="35%"
               center
               @close="Object.keys(form).map((key) => form[key] = '')">
      <template>
        <el-form :model="form"
                 label-width="100"
                 ref="dynamicValidateForm">
          <el-form-item label="公司名称"
                        prop="company"
                        :rules="[
                                    { required: true, message: '请输入公司名称', trigger: 'blur' }
                                ]">
            <el-input type="text"
                      placeholder="请输入公司名称"
                      style="width:50%;margin-right:5%;"
                      v-model="form.company">
            </el-input>
            <el-button type="primary"
                       @click="handleConfirm('dynamicValidateForm')">保存</el-button>
            <el-button type="danger"
                       @click="isShowDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <!-- dialog end -->
  </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'

    export default {
  name: "insuranceService",
  data () {
    return {
      search: '', //搜索栏内容
      page: 1, //当保险列表前页
      pageSize: 8, //保险列表每页数据多少条/页
      activeDate: ['', ''], //日期为null时默认值
      tableData: [],//保险列表数据
      tableLabel: [
        {
          label: '保险公司名称',
          prop: 'company'
        },
        {
          label: '添加时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          operation: true
        }
      ],//保险列表数据对应的标题
      loading: false, //页面加载动画
      isShowDialog: false, //弹框显示隐藏
      dialogTitle: '', //弹框标题
      form: {
        company: '',
        id: ''
      }
    }
  },
  components: {
    tableDataEl
  },
  methods: {
    async init (search = this.search) { //页面初始化
      this.loading = true;
      let valueStr = Object.assign(search,{page: this.page, pageSize: this.pageSize});
        let res = await this.api.insuranceService(valueStr);
      this.tableData = res.data;
      this.loading = false;
    },
    handleCompany (...value) { //弹框显示
      if (value[0] === 1) { // 添加保险公司
        this.dialogTitle = '添加';
      } else if (value[0] === 2) {  //修改保险公司
        this.dialogTitle = '修改';
        Object.assign(this.form, value[1])
      } else { //删除保险公司
        this.$confirm('此操作将永久删除改险种，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.api.removeCompay({ id: value[1]['id'] }).then(res => { //删除保险公司
            this.$message({
              message: res.msg,
              type: res.code === 1 ? 'success' : 'error'
            });
            this.init();
          })
        }).catch(() => {

        });
        return false;
      }
      this.isShowDialog = true;
    },
    handleConfirm (formName) { //添加和删除 id为空时添加
      this.$refs[formName].validate((valid) => {
        if (valid) {
          delete this.form['create_time'];
          this.api.mdfCompany(this.form).then(res => {
            this.$message({
              message: res.msg,
              type: res.code === 1 ? 'success' : 'error'
            });
            this.isShowDialog = false;
            this.init();
          });

        }
      })
    },

  },
  mounted () {
    this.init();
  },
  watch: {
    page () {
      this.init();
    },
    pageSize () {
      this.init();
    }
  }
}
</script>

<style scoped>
</style>
